(function (vue) {
  // html模板信息
  var template = '<div class="page-bar"> \
      <div class="page-list"> \
             <span>共{{ totalPage }}页 / {{ all }}条</span>\
             <span class="page-item" v-on:click="btnClick(1)">首页</span>\
                     <span class="page-item" :class="{disabled: currentPage === 1}" v-on:click="prvePage(cur)">上一页</span> \
             <span class="page-ellipsis" v-if="showPrevMore" >...</span>\
                     <span class="page-item" v-for="index in indexs"  v-bind:class="{ active: cur == index }" v-on:click="btnClick(index)"> \
                        {{ index < 1 ? "..." : index }} \
                     </span> \
            <span class="page-ellipsis" v-if="showNextMore">...</span>\
                      <span class="page-item" :class="{disabled: currentPage === totalPage}" v-on:click="nextPage(cur)">下一页</span> \
            <span class="page-item" v-on:click="btnClick(totalPage)">末页</span>\
            <select class="page-select form-control"  v-model="pagesize">\
            <option v-for="size in pageSizeArray" :key="size" :value="size">{{ size }}条/页</option>\
          </select>\
            <span class="ml20">跳至</span>\
            <span class="page-jump-to"><input type="type" v-model="jumpPageNumber"></span>\
            <span>页</span>\
          <span class="page-item jump-go-btn" @click="btnClick(jumpPageNumber)">GO</span>\
                   </div> \
                 </div>'
  var pagination = vue.extend({
    template: template,
    data() {
      return {
        currentPage: this.cur,
        pagesize: this.pageSizeArray[0],
        jumpPageNumber: 1,
        showPrevMore: false,
        showNextMore: false
      }
    },
    props: {
      cur: { //当前页面
        type: Number,
        default: 1
      },
      pageSizeArray: { //每页显示数量
        type: Array,
        default() {
          return [15, 20, 25, 30, 50]
        }
      },
      all: { //总条数
        type: Number,
        default: 1000
      },
      pageGroup: { //连续页码个数
        type: Number,
        default: 5
      },
    },

    computed: {
      totalPage() { //总页数
        return Math.ceil(this.all / this.pagesize);
      },
      indexs: function () {
        const totalPage = this.totalPage
        const groupArray = []
        const pageGroup = this.pageGroup
        const _offset = (pageGroup - 1) / 2
        let current = this.cur
        const offset = {
          start: current - _offset,
          end: current + _offset
        }
        if (offset.start < 1) {
          offset.end = offset.end + (1 - offset.start)
          offset.start = 1
        }
        if (offset.end > totalPage) {
          offset.start = offset.start - (offset.end - totalPage)
          offset.end = totalPage
        }
        if (offset.start < 1) offset.start = 1
        this.showPrevMore = (offset.start > 1)
        this.showNextMore = (offset.end < totalPage)
        for (let i = offset.start; i <= offset.end; i++) {
          groupArray.push(i)
        }
        return groupArray
      },

    },
    methods: {
      // 页码点击事件
      btnClick: function (pageNumber) {
        if (pageNumber < 1 || pageNumber > this.totalPage) {
          swal("页码不符合");
          this.jumpPageNumber = 1
          return;
        }
        this.currentPage = pageNumber
        this.jumpPageNumber = pageNumber
        //父组件通过change方法来接受当前的页码
        this.$emit('btn-click', { currentPage: this.currentPage, currentSize: this.pagesize })

      },

      // 下一页
      nextPage: function (data) {
        if (this.cur >= this.totalPage) return;
        this.btnClick(this.cur + 1);
      },
      // 上一页
      prvePage: function (data) {
        if (this.cur <= 1) return;
        this.btnClick(this.cur - 1);
      },
      // 设置按钮禁用样式
      setButtonClass: function (isNextButton) {
        if (isNextButton) {
          return this.cur >= this.all ? "page-button-disabled" : ""
        }
        else {
          return this.cur <= 1 ? "page-button-disabled" : ""
        }
      }
    },
    watch: {
      pagesize(newValue, oldValue) {
        if (newValue !== oldValue) {
          if (this.currentPage >= this.totalPage) { //当前页面大于总页面数
            this.currentPage = this.totalPage
          }
          this.btnClick(1);

        }
      }
    },
  })
  vue.Pagination = pagination
})(Vue)
